<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>查看机器型号</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .organizeName,
        .operation span:first-of-type {
            color: #1990FF;
        }

        .operation span:last-of-type {
            color: #F5222D;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }

        .twoRow {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layui-table tr td:nth-of-type(3) {
            min-width: 5em;
        }

        td
        {
            white-space: nowrap;
            text-align: center;
        }

    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto !important;">搜索：</label>
            <input type="text" name="machineModel" class="layui-input" style="width: 14em;" placeholder="机器型号名称" value="">
        </div>
        <div class="layui-inline">
            <input id="deptName" type="text" name="deptName" class="layui-input" style="width: 14em;" placeholder="所属部门" value="" onclick="isAdminOfMachine()">
        </div>
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">查询机型</button>
        </div>
        <div class="layui-inline" style="float: right">
            <button id="addMachineInfo" class="layui-btn layui-bg-cyan" type="button"><i class="layui-icon">&#xe654;</i>  新增机型</button>
        </div>
    </div>
</form>

<table class="layui-table">
    <thead>
    <tr>
        <th style="text-align: center">机器型号</th>
        <th style="text-align: center">所属部门</th>
        <th style="text-align: center">加入时间</th>
        <th style="text-align: center">该机总数</th>
        <th style="text-align: center">作用工序</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var laydate = null;
    var form = null;
    var list = null;

    layui.use(['form', 'element', 'laydate'], function() {
        form = layui.form;
        laydate = layui.laydate;

        search(1);

        form.on('submit(searchBtn)', function() {
            search(1);
            return false;
        });
        $('.fristPage').click(function() {
            search(1);
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1));
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage));
            return false;
        });
        $('.endPage').click(function() {
            search(endPage);
            return false;
        })
        form.on('submit(changeBtn)', function() {
            var data = form.val('change');
            data.startTime = new Date(data.startTime).getTime();
            data.endTime = new Date(data.endTime).getTime();
            $.ajax({
                url: url + '/donation-project/saveOrUpdate',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(res) {
                    layer.alert(res.msg, {
                        end: function() {
                            layer.closeAll();
                            search();
                        }
                    });
                }
            })
            return false;
        });
    })

    $('#addMachineInfo').click(function () {
        //先判断权限
        $.ajax({
            url: '/sys-user/getAdminLevel/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code===200){
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim',
                        area: ['390px', '300px'],
                        title: '新增机型',
                        content: `
                            <form class="layui-form" action="" lay-filter="change">
                                <div class="layui-row" style="margin-bottom: 10px"></div>
                                <input id="orderId" type="text" name="id" style="display: none;">

                                <div class="layui-input-inline" style="margin: 5px;">
                                <label class="layui-form-label">机器型号：</label>
                                <div class="layui-input-inline " style="width: 15em"  >
                                <input autocomplete="off" id="machineModelOfAdd" type="text" placeholder="请输入机器名称" name="machineModelOfAdd" lay-verify="required" class="layui-input" style="margin-bottom: 10px ; width: 15em !important;">
                                </div></div>

                                <div class="layui-input-inline" style="margin: 5px;">
                                <label class="layui-form-label">所属部门：</label>
                                <div class="layui-input-inline " style="width: 15em"  >
                                <select name="deptNameOfAdd" id="deptNameOfAdd" lay-verify="required" lay-filter="deptNameOfAdd" lay-search="">
                                </select>
                                </div></div>

                                <div align="center" style="margin: 20px">
                                <button id="add" type="submit" class="layui-btn" lay-submit="" lay-filter="add" >确认添加</button>
                                <button type="button" class="layui-btn layui-btn-danger" onclick="layer.close(layer.index)">取消</button></div>
                            </form>
          `,
                        success: function(){
                            //部门下拉框
                            $.ajax({
                                url: url + '/sys-dept/listDept',
                                method: 'POST',
                                async : false,
                                contentType: 'application/json',
                                success: function(res) {
                                    //显示前先判断是否为管理员
                                    $.ajax({
                                        url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
                                        method: 'GET',
                                        async : false,
                                        contentType: 'application/json',
                                        success: function (res) {
                                            if (res.code===200){
                                                isAd=1;
                                            }
                                            else if (res.code===400){
                                                isAd=0;
                                                thisDept=res.data.dept;
                                            }
                                        }
                                    })
                                    //按照是否为管理员显示下拉框
                                    if (res.code == 200) {
                                        for (var i = 0; i < res.data.length; i++) {
                                            if(isAd===1){
                                                $("#deptNameOfAdd").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                                            }else if (isAd===0&&res.data[i].dept===thisDept){
                                                $("#deptNameOfAdd").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                                            }
                                        }
                                        form.render('select');
                                    }
                                }
                            })
                            //下拉框默认
                            // $.ajax({
                            //     url: url + '/process-info/getProcessInfo',
                            //     method: 'POST',
                            //     async : false,
                            //     contentType: 'application/json',
                            //     data: JSON.stringify({
                            //         deptId: $('#deptNameOfAdd').val()
                            //     }),
                            //     success: function(res) {
                            //         if (res.code == 200) {
                            //             for (var i = 0; i < res.data.length; i++) {
                            //                 $("#process").append("<option value='" + res.data[i].id + "'>" + res.data[i].processName +
                            //                     "</option>");
                            //             }
                            //             form.render('select');
                            //         }
                            //     }
                            // })

                            //下拉框二级联动
                            // form.on('select(deptNameOfAdd)', function(data) {
                            //     $("#process").empty()
                            //     $.ajax({
                            //         url: url + '/process-info/getProcessInfo',
                            //         method: 'POST',
                            //         async : false,
                            //         contentType: 'application/json',
                            //         data: JSON.stringify({
                            //             deptId: $('#deptNameOfAdd').val()
                            //         }),
                            //         success: function(res) {
                            //             if (res.code == 200) {
                            //                 for (var i = 0; i < res.data.length; i++) {
                            //                     $("#process").append("<option value='" + res.data[i].id + "'>" + res.data[i].processName +
                            //                         "</option>");
                            //                 }
                            //                 form.render('select');
                            //             }
                            //         }
                            //     })
                            // });
                        }
                    });
                }else {
                    layer.msg("权限不足")
                }
            }
        })
        //保存
        form.on('submit(add)', function(data) {
            $.ajax({
                url: url + '/machine-info/addMachineInfo',
                method: 'POST',
                async : false,
                contentType: 'application/json',
                data: JSON.stringify({
                    machineModel:$('#machineModelOfAdd').val(),
                    deptId: $('#deptNameOfAdd').val()
                }),
                success: function(res) {
                    if (res.code == 200) {
                        parent.layer.alert(res.msg, {
                            icon: 1,
                            skin: 'layer-ext-demo',
                            end: function(){
                                location.reload();
                            }
                        });
                    }else {
                        parent.layer.alert(res.msg, {
                            icon: 2,
                            skin: 'layer-ext-demo'
                        });
                    }
                }
            })
            return false;
        })
    })


    function edit(index) {
        layer.alert('编辑功能未开放' +
            '</br>有需求请联系管理员!', {
            icon: 0,
            skin: 'layer-ext-demo' //见：扩展说明
        })
    }

    function isAdminOfMachine() {
        $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code===200){
                }
                else if (res.code===400){
                    $('#deptName').attr('disabled','disabled');
                    layer.msg("非管理员只能查看本部门机型");
                }
            }
        })
    }

    function deleteMachine(index) {
        layer.alert('禁止删除!', {
            icon: 2,
            skin: 'layer-ext-demo' //见：扩展说明
        })
    }

    function search(index) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.userId=sessionStorage.getItem('userId');
        data.displayStart = index;
        $.ajax({
            url: url + '/machine-info/listMachine',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(res) {
                $('tbody').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('tbody').append(
                        "<tr>"+
                        "<td class='organizeName'>" + res.data.records[i].machineModel + "</td>" +
                        "<td>" + res.data.records[i].deptName + "</td>" +
                        "<td>" + res.data.records[i].createTime.replace('T', ' ') +"</td>" +
                        "<td >" + res.data.records[i].machineAmount +"</td>" +
                        "<td class='organizeName'>" + res.data.records[i].processName +"</td>" +
                        "<td class='operation'><button class='layui-btn layui-btn-normal layui-btn-sm' onclick='edit(" + res.data.records[i].id + ")'>编辑</button>　" +
                        "<button class='layui-btn layui-btn-danger layui-btn-sm' onclick='deleteMachine(" + res.data.records[i].id + ")'>删除</button></td>" +
                        "</tr>"
                    );
                }
                $('#page').html(displayStart)
            }
        })
    }
</script>
</body>
</html>
